<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>写日记</title>
    <base th:href="${#request.getContextPath()}+'/'">
    <!--bootstrap.min.css-->
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/layer/layui.css}">
    <link rel="stylesheet" th:href="@{/bootstrap/font-awesome/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/bootstrap/css/menu/write_diary.css}">
    <link rel="stylesheet" th:href="@{/bootstrap/css/scroll_bar.css}">
    <style>
        .option_area {
            position: relative;
        }

        .option_area:hover .options {
            display: block;
        }

        .option_area .selected_value {
            display: block;
            cursor: pointer;
        }

        .option_area .options .node:hover {
            background: #0893fb;
            color: #FFF;
        }

        .option_area .options .node {
            height: 30px;
            line-height: 30px;
            cursor: pointer;
        }

        .option_area .options {
            display: none;
            background: #FFF;
            width: 100%;
            position: absolute;
            height: 150px;
            z-index: 10;
            left: 0;
            top: 30px;
            text-indent: 1rem;
            border: 1px solid #eee;
            overflow-y: auto;
        }
    </style>
</head>
<body>
<div class="container">
    <form id="article" class="form-horizontal" style="margin-top: 15px;">
        <input type="hidden" name="archiveKey"/>
        <div class="col-md-12">
            <div class="form-group">
                <label class="col-sm-2 control-label" for="name">名称：</label>
                <div class="col-sm-10">
                    <input type="text" autocomplete="off" name="name" id="name" class="form-control"
                           placeholder="请输入名称"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">父节点：</label>
                <div class="col-sm-10">
                    <div class="form-control option_area">
                        <span class="selected_value" id="fnv"></span>
                        <ul class="options" id="fn">
                            <!--<li class="node">好哦1</li>-->
                        </ul>
                    </div>
                    <!--<input class="form-control" id="code" name="code" placeholder="选择父节点(不选默认为根节点)"/>-->
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label" for="icon">icon：</label>
                <div class="col-sm-10">
                    <input class="form-control" id="icon" autocomplete="off" name="icon" placeholder="icon"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="button" onclick="submitFrom()" class="btn btn-primary"><i
                            class="fa fa-check pdr5" aria-hidden="true"></i>确定
                    </button>
                    <button type="button" onclick="cancel()" class="btn btn-success">
                        <i class="fa fa-times pdr5"
                           aria-hidden="true"></i>
                        取消
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>
</body>
<script th:src="@{/bootstrap/js/JSONUtil.js}"></script>
<script th:src="@{/bootstrap/js/jquery.js}"></script>
<script th:src="@{/layer/layer.js}"></script>
<script th:src="@{/bootstrap/js/AjaxUtil.js}"></script>
<!--bootstrap.min.js-->
<script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
<script>
    /**
     * 初始化数据
     */
    function init(data) {
        if (data) {
            $("input[name='archiveKey']").val(data.archiveKey);
            $("input[name='name']").val(data.name);
            $("input[name='icon']").val(data.icon);
            if (data.parentNode) {
                $('#fnv').attr('data-id', data.parentNode.archiveKey).text(data.parentNode.name);
            }
        }
        loadFatherOptions();
    }


    /**
     * 提交表单
     */
    function submitFrom() {
        let data = $('#article').serialize();
        //序列化获得表单数据，结果为：user_id=12&user_name=John&user_age=20
        let formData = JSONUtil.serializeFormToJson(data);
        let url = "archive/addOrUpdateArchive";
        let pKey = $('#fnv').data('id');
        formData['fatherNode'] = pKey ? pKey : 0;
        ajaxPost(url, formData, function () {
            layer.load(1);
        }, function (result) {
            if (result.code === 200) {
                layer.closeAll('loading');
                let data = result.data;
                if (pKey) {
                    let parent = {archiveKey: pKey, name: $('#fnv').text()};
                    data['parentNode'] = parent;
                }
                parent.editSuccessCallback(data);
                cancel();
            } else {
                layer.closeAll('loading');
                layer.msg(result.message, {icon: 0});
            }
        }, function () {
            layer.closeAll('loading');
            layer.msg('服务器好像出了问题, 请稍后重试', {icon: 0});
        });
    }

    /**
     * 监听子项事件
     */
    $('.option_area .options').on('click', '.node', function () {
        let key = $(this).data('id');
        let value = $(this).text();
        $('#fnv').attr('data-id', key).text(value);
    });

    /**
     * 加载父节点数据
     */
    function loadFatherOptions() {
        ajaxPost('archive/getAllFatherArchive', {}, function () {
        }, function (result) {
            if (result.code + '' === '200') {
                let data = result.data, html = '';
                for (let i = 0; i < data.length; i++) {
                    let v = data[i];
                    html += '<li class="node" data-id="' + v.archiveKey + '">' + v.name + '</li>';
                }
                $('#fn').empty().html(html);
            } else {
                layer.msg(result.message, {icon: 0});
            }
        }, function () {
            layer.msg('服务器好像出了问题, 加载父节点出错', {icon: 0});
        });
    }


    function cancel() {
        let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index); //再执行关闭
    }


</script>
</html>